<template>
  <div class="full">
    <el-scrollbar>
      <div class="dlText-120 list-b-12 p-12">
        <CellBox title="工艺信息">
          <TableBoxMx :data="{
            tbody: data.productTechniqueList,
            thead: [
              {
                label: '工艺编号',
                prop: 'craftCode',
                align: 'center',
                width: 80,
              },
              {
                label: '工艺名称',
                prop: 'craftCode',
                align: 'left',
                width: 220,
                options: options.produceCraft,
              },
              {
                label: '资料卡填写',
                prop: 'productTechniqueCardState',
                align: 'center',
                width: 120,
                isTag: true,
                options: [
                  {
                    label: '待填写',
                    value: 0,
                    type: 'info',
                  },
                  {
                    label: '已填写',
                    value: 1,
                    type: 'primary',
                  },
                  {
                    label: '已锁定',
                    value: 2,
                    type: 'success',
                  }
                ],
              },
              {
                label: '使用设备',
                prop: 'deviceCode',
                align: 'left',
                width: 160,
                optionsRow: 'produceMachineList',
                labelName: 'machineName',
                valueName: 'machineCode',
              },
              {
                label: '备注',
                prop: 'craftRequirement',
                align: 'left',
              }
            ],
            //操作
            operation: [
              {
                label: (row: any) => {
                  return row.productTechniqueCardState === 2 ? '解锁' : '锁定'
                },
                icon: (row: any) => {
                  return row.productTechniqueCardState === 2 ? 'Unlock' : 'Lock'
                },
                click: (row: any) => {
                  proxy.$api.OrderBusniess.GetProductTechniqueCardDetails({
                    productTechniqueCode: row.productTechniqueCode,
                  })
                    .then((res: any) => {
                      const _baseData = res.baseData
                      proxy.$api.OrderBusniess.UpdateProductTechniqueCardIsLocked({
                        productTechniqueCardCode: _baseData.productTechniqueCardCode,//产品工艺资料卡唯一code
                        isLocked: _baseData.isLocked === 1 ? 0 : 1,//是否锁定（0：未锁定；1：已锁定）
                      }).then((res: any) => {
                        proxy.$message(`${_baseData.isLocked === 1 ? '解锁' : '锁定'}成功`);
                        saveBtn()
                      });
                    }).catch(() => {

                    })
                }
              },
              {
                label: '填写资料卡',
                icon: 'Edit',
                click: (row: any, index: number) => {
                  proxy.$openPup(pupAdd, 1)
                  pupAdd.productTechniqueCode = row.productTechniqueCode
                  pupAdd.productName = data.baseData.productName
                }
              }
            ],
          }">
          </TableBoxMx>
        </CellBox>
      </div>
    </el-scrollbar>
  </div>
  <ProcessDataCardPup :pup="pupAdd" @saveBtn="saveBtn" />
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
import ProcessDataCardPup from '@/views/business/productManager/details/ProcessDataCardPup.vue'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    setState?: Function;//更改状态
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
const saveBtn = () => {
  emit('saveBtn')
}
//弹窗-数据
const pupAdd: any = reactive({
  state: false,
  productTechniqueCode: '',
});
import { getProductType, getProduceCraft } from '@/utils/optionsArr.ts';
onMounted(() => {
  getProductType() //获取产品类型
  getProduceCraft(props.options, 'produceCraft') //获取工艺数据
});
</script>
